<!--基本信息组件-->
<template>
  <div class="content">
    <div class="content-form">
      <!--标题-->
      <div class="form-head">{{ title }}</div>
      <!--基本信息表单-->
      <div class="form-title">
        <div class="title-content">基本信息</div>
        <el-form :model="essentialInformation" ref="basicInformationRef" class="essentialInformation-body">
          <div class="body-item">
            <el-form-item prop="workOrderNumber">
              <el-input v-model="essentialInformation.workOrderNumber" placeholder="请输入工单编号">
                <template #prepend>工单编号</template>
              </el-input>
            </el-form-item>
            <el-form-item prop="informant">
              <el-input v-model="essentialInformation.informant" placeholder="请输入填报人">
                <template #prepend>填报人</template>
              </el-input>
            </el-form-item>
            <el-form-item prop="fillInDate">
              <div class="el-input">
                <div class="el-input-group__prepend">填报日期</div>
                <el-date-picker
                  v-model="essentialInformation.fillInDate"
                  type="date"
                  placeholder="请输入填报日期"
                  style="width: 100%"
                >
                </el-date-picker>
              </div>
            </el-form-item>
          </div>
          <div class="body-item">
            <el-form-item prop="unit">
              <el-input v-model="essentialInformation.unit" placeholder="请输入填报单位">
                <template #prepend>填报单位</template>
              </el-input>
            </el-form-item>
            <el-form-item prop="department">
              <el-input v-model="essentialInformation.department" placeholder="请输入发起部门">
                <template #prepend>发起部门</template>
              </el-input>
            </el-form-item>
     
          </div>
        
        </el-form>
      </div>
    </div>
  </div>
</template>
<script setup>
import { reactive,onMounted } from "vue";
const props = defineProps({
  title: {
    type: String, //数据类型
    required: false, //是否必须
    default: "基本信息", //默认值
  },
});
const essentialInformation = reactive({
  workOrderNumber: "", //工单编号
  informant: "", //填报人
  fillInDate: "", //填报日期
  unit: "", //填报单位
  department: "", //发起部门
}); //基本信息表单
defineExpose({
  essentialInformation, //暴露表单数据
});
</script>

<style scoped lang="less">
@import "@/assets/styles/flowDemo/index";
.content {
  width: 100%;
  .content-form {
    padding: 0 24px;
    .form-head {
      display: flex;
      place-content: center;
      align-items: center;
      font-weight: 700;
      color: #303133;
      font-size: 20px;
      height: 74px;
    }
    .form-title {
      :deep(.essentialInformation-body) {
        .file-upload {
          display: flex;
          justify-content: flex-start;
          align-items: flex-start;

          .el-form-item__label {
            color: #606266;
            font-size: 14px;
            font-weight: 500;
          }
          .file-upload-item {
            width: 35%;
          }
        }
        .economicBenefit-form {
          .el-form-item--default {
            margin-bottom: 0px;
          }
        }
        .body-item {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          column-gap: 19px;
          .el-form-item__content {
            display: grid;
            .el-input {
              flex: 1;
                display: flex;
              //输入框标题
              .el-input-group__prepend {
                width: 116px;
                height: 40px;
                background: #f8f9fd;
                border: 1px solid #e3e4e8;
                flex-wrap: wrap;
                color: #606266;
                font-size: 14px;
                padding: 0 15px;
                white-space: normal;
                line-height: normal;
                display: flex;
                place-content: center;
                place-items: center;
                text-align: center;
                box-shadow: none;
              }
              //输入框
              .el-input__wrapper {
                border-radius: unset;
                height: 40px;
                flex: 1;
              }
            }
            .item-flex2 {
              grid-row: 1 / span 1;
              grid-column: 2 / span 2;
            }
            .item-textarea {
              grid-row: 1 / span 1;
              grid-column: 1 / span 3;
              display: flex;
              .textarea-title {
                width: 116px;
                height: auto;
                background: #f8f9fd;
                border: 1px solid #e3e4e8;
                flex-wrap: wrap;
                color: #606266;
                font-size: 14px;
                padding: 0 15px;
                white-space: normal;
                line-height: normal;
                display: flex;
                place-content: center;
                place-items: center;
              }
              .item-flex3 {
                flex: 1;
                textarea {
                  height: 40px;
                  width: 1560px;
                  line-height: normal;
                  border-radius: 0;
                }
              }
            }
            .item-select {
              display: flex;
              .select-title {
                width: 116px;
                height: 40px;
                background: #f8f9fd;
                border: 1px solid #e3e4e8;
                flex-wrap: wrap;
                color: #606266;
                font-size: 14px;
                padding: 0 15px;
                white-space: normal;
                line-height: normal;
                display: flex;
                place-content: center;
                place-items: center;
                text-align: center;
              }
              .select-content {
                flex: 1;
                height: 40px;
                width: 430px;
                border: 1px solid #e3e4e8;
                padding: 0 10px;
                cursor: pointer;
                line-height: 40px;
                &.contentState {
                  color: #909399;
                }
              }
              .select-option {
                flex: 1;
                textarea {
                  height: 40px;
                  line-height: normal;
                  border-radius: 0;
                }
              }
            }
          }
        }
        .body-form {
          margin-bottom: 20px;
        }
      }
    }
  }
}
</style>
